<template>
  <div class="big-box">
    <div class="header">
      <div class="header-header">
        <van-tabs line-width="20px" color="#00be8c" sticky offset-top="0px">
          <van-tab title="医生排行榜" />
          <van-tab title="按科室" />
          <van-tab title="按疾病" />
        </van-tabs>
      </div>
      <div>
        <div class="header-one">
          <div class="input">
            <span style="width: 1rem;">全国<van-icon name="arrow-down" /></span>
            <span>
              <van-cell-group inset class="input-one" @click="jumpsousuo">
                <van-field style="width: 5.5rem;margin-top: -0.1rem;" center clearable left-icon="search"
                  placeholder="搜索医院、科室、医生">
                  <template #button>
                    <van-button class="btn" size="small">搜索</van-button>
                  </template>
                </van-field>
              </van-cell-group>
            </span>
          </div>
          <div class="tab">
            <van-dropdown-menu style="width: 100%;" active-color="#00be8c">
              <van-dropdown-item title="科室" @open="jump" />

              <van-dropdown-item class="item" :title="clickedItem" ref="itemRef">
                <div class="item-one">
                    <van-button v-for="(item,index) in title" :key="index" class="btn" color="#00be8c" round type="success"
                    style="width: 2.2rem;height: 0.65rem;" @click="chooseADoctor(index)">{{ item }}</van-button>
                    
                </div>

                <div style="padding: 5px 120px; border-top: 1px solid #eeeeee;">
                  <van-button color="#00be8c" type="primary" block round @click="onConfirm">
                    确认
                  </van-button>
                </div>
              </van-dropdown-item>
            </van-dropdown-menu>
          </div>
        </div>
      </div>
    </div>
    <div class="big-body">
      <div class="body">
        <Introduction :list="list"/>
      </div>
    </div>
  </div>
  <div class="big-footer">
    <van-popover placement="top" v-model:show="showPopover" :actions="actions" @select="onSelect" duration="0.3" >
      <template #reference>
        <van-icon style="font-size: 0.5rem;" name="wap-nav" />
      </template>
    </van-popover>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
import Introduction from '../../components/DoctorCard/Introduction.vue'
const itemRef = ref();
const router = useRouter();
const title=ref(['不限','主任医师','副主任医师','主治医师','住院医师'])
const clickedItem = ref('不限');
const jumpsousuo=()=>{
  router.push('/xiao/selector')
}
const jump = () => {
  //点击科室跳转到选择页面
  router.push('/ekk')
}

const chooseADoctor = (index: number) => {
  console.log(title.value,index)
  clickedItem.value = title.value[index];
  
};

// 通过 actions 属性来定义菜单选项
const actions = [
  { text: '首页' },
  { text: '按医院' },
  { text: '按科室' },
  { text: '按医生' },
  { text: '我的挂号' },
];
const onSelect = (action:any) => new Toast(action.text);

import { doctorPictures } from '../../api/index'
interface doctor {
    doctorname: string,
    doctoradministre: string,
    doctorstate: string,
    doctordescword: string,
    doctorimage: string
}
const list = ref<doctor[]>([])
const list1 = ref<doctor[]>([])
const department = async () => {
    //调用接口
    await doctorPictures().then((res) => {
        list1.value = res.data.data
        list.value = res.data.data.slice(0, 8) 
    })
}
department()

const onConfirm=()=>{
  itemRef.value.toggle();
  list.value = list1.value.filter((item) => item.doctorstate === clickedItem.value).slice(0, 8)
  if (clickedItem.value === '不限') {
    list.value = list1.value.slice(0, 8)
  }
  console.log(list.value)
}
const showPopover = ref(false);

</script>

<style scoped>
* {
  font-size: 0.25rem;
}

.big-box {
  width: 100%;
  height: 100vh;
}

.header-header {
  width: 100%;
  height: 0.84rem;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.header {
  width: 100%;
  height: 2.79rem;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}

.header-one {
  width: 100%;
  height: 2rem;
  background: #fff;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .input {
    width: 90%;
    height: 50%;
    display: flex;
    align-items: center;
    .input-one {
      width: 100%;
      height: 0.7rem;
      line-height: 0.7rem;
      margin: 0;
      border-radius: 2rem;
      border: 1px solid #00be8c;
    }

    .btn {
      border: none;
      border-left: 1px solid #dddddd;
      color: #00be8c;
    }
  }

  .tab {
    width: 90%;
    height: 50%;
    display: flex;
    align-items: center;
    .item-one {
      width: 100%;
      height: 3rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: flex-start;

      .btn {
        margin: 0.1rem;
      }
    }
  }
}

.big-body {
  float: left;
  width: 100%;

  margin-top: 2.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0 0 0;
  background: #f5f5f5;

  .body {
    width: 90%;
    height: 100%;
  }
}

.big-footer {
  width: 0.8rem;
  height: 0.8rem;
  position: relative;
  position: fixed;
  left: 5.7rem;
  top: 12rem;
  z-index: 100;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 1rem;
  border: 1px solid #eeeeee;
  box-shadow: 0px 3px 10px #cfcfcf;
}
</style>